/*
 * @Descripttion: 
 * @version: 
 * @Author: TOTO
 * @Date: 2022-03-29 14:39:23
 * @LastEditors: Andy
 * @LastEditTime: 2022-04-11 20:13:26
 */
// /*
//  * @Date: 2022-03-29 12:49:54
//  * @LastEditors: Andy
//  * @LastEditTime: 2022-03-31 10:17:31
//  * @FilePath: /payment/pay/src/pleiXings/leiXingncyTenant/leiXingncyPayRecord.jsx
//  */
import React, { useState, useEffect } from 'react';
import { Row, Col, Form, Input, DatePicker, Select, Button, Table, Modal, ConfigProvider, Pagination } from 'antd'
import Tab from '../../components/Tabs'
import styles from './index.module.css'
import zhCN from 'antd/es/locale/zh_CN'
import { SearchOutlined,ReloadOutlined } from '@ant-design/icons'
import Export from '../Tenant/Export';
import axios from '../../util/axios'
const { Option } = Select
const { RangePicker } = DatePicker

export default function AgencyPayRecord() {
  const [data, setData] = useState([]);//表格
  const [SH, setSH] = useState([]);//商户
  const [KS, setKS] = useState([]);//卡商
  const [LX, setLX] = useState([]);//支付类型
  const[ZjeAndSxf,setZjeAndSxf]=useState([])//充值总金额
  const [searchForm] = Form.useForm();//搜索

  useEffect(() => {
    gettableData()
  }, [])
  //渲染表格
  const gettableData = () => {
    axios({
      method: 'get',
      url: 'admin/rujinjilu/selectAllRuJinJiLu',
      params: { limit: 9999, page: 1 }
    }).then(res => {
      // console.log(res.data);
      let dataArr = res.data.RuJinJiLu.map((item, index) => {
        item.key = index
        return item
      });
      // console.log(dataArr);
      // console.log(res.count);
      setData(dataArr);
      setSH(res.data.SH);//商户
      setKS(res.data.KS);//卡商
      setLX(res.data.LX);//支付类型
      setZjeAndSxf(res.data.ZjeAndSxf)

    })

  }
  // 搜索
  const onSubmit = (fieldsValue) => {
    const rangeValue = fieldsValue['Time'];
    const values = {
      ...fieldsValue,
      'Time': rangeValue && [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
    }
    console.log('Received values of form: ', values);
    axios({
      method: 'get',
      url: 'admin/rujinjilu/selectRuJinJiLu',
      params: {
        limit: 9999,
        page: 1,
        kshang: values.kshang,
        liushuihao: values.liushuihao,
        shangHuName: values.shangHuName,
        zhangbianType: values.zhangbianType,
        startTime: values.Time ? values.Time[0] : '',
        zhifuleixing: values.zhifuleixing,
        endTime: values.Time ? values.Time[1] : ''
      }
    }).then(res => {
      console.log(res);
      if (res.code === 200) {
        let dataArr = res.data.ShuJu.map((item, index) => {
          item.key = index
          return item
        });
        console.log('11111', dataArr);
        setData(dataArr);
        setZjeAndSxf(res.data.ZjeAndSxf)
      }

    })
  }
  //刷新
  const reload=()=>{
    gettableData();
    searchForm.resetFields()
  }
  //表格
  const columns = [
    {
      title: '流水号',
      width: 150,
      dataIndex: 'liuShuiHao',
      align:'center'
    },
    {
      title: '支付类型',
      width: 100,
      dataIndex: 'leiXing',
      align: 'center',
      render: (text, record, index) => {
        return record.leiXing === '充值' ? <span style={{ color: 'greenyellow' }}>充值</span> : record.leiXing === '扣款' ? <span style={{ color: 'red' }}>扣款</span> : ''
      }
    },
    {
      title: '商户名称',
      dataIndex: 'name',
      align: 'center',
      width: 150,
    },
    {
      title: '用户号',
      dataIndex: 'yongHuId',
      key: '2',
      width: 150,
      align: 'center'
    },
    {
      title: '实际金额',
      dataIndex: 'money',
      key: '3',
      width: 150,
      align: 'center'
    },
    {
      title: '变动前金额',
      dataIndex: 'dangQianYuE',
      key: '4',
      width: 150,
      align: 'center'
    },
    {
      title: '变动金额',
      dataIndex: 'bianDongJinE',
      key: '5',
      width: 150,
      align: 'center',
      render: (text, record, index) => {
        return record.bianDongJinE > 0 ? <span style={{ color: 'greenyellow' }}>{record.bianDongJinE}</span> : record.bianDongJinE < 0 ? <span style={{ color: 'red' }}>{record.bianDongJinE}</span> : ''
      }
    },
    {
      title: '变动后金额',
      dataIndex: 'bianDongHouJinE',
      key: '6',
      width: 150,
      align: 'center'
    },
    {
      title: '手续费',
      dataIndex: 'shouXuFei',
      key: '6',
      width: 150,
      align: 'center'
    },
    {
      title: '操作人',
      dataIndex: 'caoZuoRen',
      key: '7',
      width: 150,
      align: 'center'
    },
    {
      title: '操作时间',
      key: 'caoZuoShiJian',
      width: 100,
      align: 'center'
    },
  ];

  return (
    <div>
      <ConfigProvider locale={zhCN}>
        <Row>
          <Col span={24}>
            <Tab title={'代理入金记录'} />
          </Col>
        </Row>
        <Row className={styles.requestSearch}>
          <Col span={24}>
            <Form layout="inline" onFinish={onSubmit} form={searchForm}>
              <Row>
                <Col span={5}>
                  <Form.Item name='liushuihao'>
                    <Input placeholder='流水号' />
                  </Form.Item>
                </Col>
                <Col span={5}>
                  <Form.Item name='shangHuName'>
                    <Select placeholder="商户">
                      {
                        SH.map((item, index) => {
                          return (<Select.Option key={index} value={item.name} >{item.name}</Select.Option>)
                        })
                      }
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={5}>
                  <Form.Item name='kashang'>
                    <Select placeholder="卡商">
                      {
                        KS.map((item, index) => {
                          return (<Select.Option key={index} value={item.name} >{item.name}</Select.Option>)
                        })
                      }
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={5}>
                  <Form.Item name='leiXing'>
                    <Select placeholder="支付类型">
                      {
                        LX.map((item, index) => {
                          return (<Select.Option key={index} value={item.state} >{item.state}</Select.Option>)
                        })
                      }
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={6} style={{ margin: '10px 0' }}>
                  <Form.Item name='Time' >
                    <RangePicker locale={zhCN} />
                  </Form.Item>
                </Col>
                <Col span={3} style={{ margin: '10px 0' }}>
                  <Form.Item  >
                    <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                      搜索
                    </Button>
                  </Form.Item>
                </Col>
                <Col span={3} style={{ margin: '10px 0' }}>
                  <Form.Item >
                    <Export data={data} header={columns} fileName='代理入金记录.xlsx' />
                  </Form.Item>
                </Col>
                <Col span={2} offset={1}  style={{ margin: '10px 0' }}>
              <Form.Item >
                <Button shape="circle" icon={<ReloadOutlined />} onClick={reload} />
              </Form.Item>
            </Col>
              </Row>
            </Form>
          </Col>
        </Row>
        {/* <Row>
          <Col span={24}>
            <Table pagination={pagination} rowSelection={rowSelection} columns={columns} dataSource={dataSource} title={() => <Row><Col span={2} className={styles.tableTitle}>充值金额</Col><Col span={6}><Input disabled placeholder='5125830.44/5125830.44' /></Col></Row>} />
          </Col>
        </Row> */}
        <Row>
          <Col span={2} className={styles.tableTitle}>
            充值总金额 </Col>
          <Col span={6}>
            <Input disabled placeholder={ZjeAndSxf[0]} />
          </Col>
          <Col span={2} className={styles.tableTitle}>
            充值手续费</Col>
          <Col span={6}>
            <Input disabled placeholder={ZjeAndSxf[1]} />
          </Col>

          <Col span={24}>
            <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 400 }}
              pagination={{ showSizeChanger: true, showQuickJumper: true }}
            />
          </Col>
        </Row>
      </ConfigProvider>


    </div>
  )
}
